<template>
  <div class="common-menu">
    <div class="logo" />
    <div class="menu">
      <a-menu  @menu-item-click="menuItemClicked" auto-open  >
        <div v-for="item in menu" :key="item.key">
          <div v-if="item.children">
            <a-sub-menu :key="item.key">
              <template #title>
                <component :is="item.icon" />
                <span>{{ item.title }}</span>
              </template>
              <a-menu-item v-for="child in item.children" :key="child.key">
                <template #icon>
                  <component :is="child.icon" />
                </template>
                <span>{{ child.title }}</span>
              </a-menu-item>
            </a-sub-menu>
          </div>
          <div v-else>
            <a-menu-item  :key ="item.key" >
              <template #icon>
                <component :is="item.icon" />
              </template>
              <span>{{ item.title }}</span>
            </a-menu-item>
          </div>
        </div>
      </a-menu>
    </div>
  </div>





</template>
<script setup >



defineProps(
  {
    menu:Array
  }
)

const selectKey = defineModel('selectKey')

const menuItemClicked = (key) => {
  selectKey.value = key
}

</script>
<style scoped>
.common-menu{
  height: 100vh;
  .logo{
    background: var(--color-fill-2);
    height: 35px;
    width: 200px;
    position: relative;
    left: 10px;
    padding: 10px;
    top: 10px;
  }


}



</style>
